<template>
	<view class="app-system-pay-goods-goods-item bg-white e-radius-20 e-p-20">
		<view>
			<slot name="header">
				<view class="e-m-b-30 e-flex " v-if="store"
					@tap="jump(store.type === 2 ? '/pages/nearby/store/info' : '/pages/store/index', { id: store.id })">
					<view class="e-m-r-12">
						<load-image mode="aspectFill" :size="['48rpx']" radius="10rpx" :src="store.storeLogo">
						</load-image>
					</view>
					<text class="fw-600">{{ store.storeName }}</text>
					<view class="self-icon e-m-l-20" v-if="APP_HAS_OWN&&(store.storeHasOwn||store.hasOwn)">
						{{ $t('classify.自营') }}
					</view>
				</view>
			</slot>
			<view v-for="gItem in list" :key="gItem.commodityId">
				<view class="app-system-pay-goods-goods-item__info e-flex  e-flex-items-stretch">
					<view class="e-m-r-20">
						<load-image mode="aspectFill" :size="['180rpx']" :src="gItem.commodityUrl">
						</load-image>
					</view>
					<view class="e-flex-1">
						<view
							class="app-system-pay-goods-goods-item__info-title  e-m-b-10 e-flex e-flex-items-start e-flex-between ">
							<view class="e-line-2 e-flex-1">
								<text>{{ gItem.commodityName }}</text>
							</view>
							<view class="e-m-l-30">
								<text class="e-font-20">{{$unitEn}}</text>
								<text class="fw-600">{{ gItem.deputyMoney }}</text>
							</view>
						</view>

						<view class=" e-flex e-m-b-20 ">
							<text class="c-secondary">{{ gItem.commoditySpecName }}</text>
						</view>

						<view class="e-flex e-flex-between" style="width:100%">
							<view></view>
							<view class="e-m-l-30">X{{ gItem.commodityCount }}
							</view>
						</view>

					</view>

				</view>

				<slot name="deduction" :goods="gItem"></slot>
			</view>
			<!-- 不可下单商品 -->
			<view class="no-can-list e-p-20" v-if="noList && noList.length" @tap="handleShowReason">
				<view class="e-flex e-font-24 e-m-b-20" style="color:#808080">
					<view class=" e-flex-1">
						<text>{{$t('classify.以下商品无法购买')}}</text>
						<text>（{{$t('cart.共')}} {{noList.length}} {{$t('classify.件')}}）</text>
					</view>
					<view class="e-flex">
						<text class="e-m-r-4">{{$t('classify.查看原因')}}</text>
						<app-image src="arrow_right.png" :size="['20rpx']" />
					</view>
				</view>
				<view class="">
					<scroll-view scroll-x="true" style="white-space: nowrap;">
						<view class="e-flex">
							<view class="no-can-list__item e-m-r-20" v-for="item in noList" :key="item.commoditySpecId">
								<load-image mode="aspectFit" :size="['100rpx']" :src="item.commodityUrl">
								</load-image>
							</view>
						</view>
					</scroll-view>
				</view>
			</view>

		</view>
		<slot name="storeCoupon">

		</slot>
		<slot name="orderVos"></slot>
	</view>
</template>
<script lang="ts">
	import {
		defineComponent
	} from 'vue'
	export default defineComponent({
		name: 'goods-card',
		// #ifdef MP-WEIXIN
		// 将自定义节点设置成虚拟的，更加接近Vue组件的表现
		options: {
			virtualHost: true
		},
		// #endif
	})
</script>
<script setup lang="ts">
	import { computed } from 'vue'
	import type { StoreInfo, OrderGoods } from '@/common/request/api'
	import { useCurrentInstance } from '@/common/hooks'
	import { APP_HAS_OWN } from '@/env'


	const props = withDefaults(defineProps<{
		// 店铺信息
		store : Partial<StoreInfo> & Record<string, any>
		// 商品列表
		goodsList : OrderGoods['deputys'] & Record<string, any>
		// 不可以下单的商品列表
		noCanList : OrderGoods['deputys']
		// 超出闪送限购数量的商品列表
		exceedLimitList : OrderGoods['deputys']
	}>(), {

	})

	const emits = defineEmits(['update:goodsList', 'showReason', 'editCount'])

	const ctx = useCurrentInstance()


	const list = computed({
		get() {
			return props.goodsList
		},
		set(v) {
			emits('update:goodsList', v)
		}
	})



	const noList = computed(() => {
		let arr = []
		if (props.noCanList) {
			arr.push(...props.noCanList)
		}
		if (props.exceedLimitList) {
			arr.push(...props.exceedLimitList)
		}
		return arr
	})

	// 跳转页面
	const jump = (url : string, params : Record<string, string | number | undefined>) => {
		ctx.$goTo(url, params)
	}
	
	const handleShowReason = () => {
		emits('showReason', props.noCanList, props.exceedLimitList)
	}
	
</script>

<style lang="scss" scoped>
	@include appBem_b(system-pay-goods-goods-item) {

		.scale-8 {
			transform: scale(0.8);
		}


		.c-9a {
			color: #9a9a9a;
		}

		@include appBem_e(info) {
			padding: 30rpx 30rpx 30rpx 30rpx;
			box-shadow: 0px -2rpx 0px 0px #f3f3f3;

			&-title {
				width: 100%;
				color: #454545;
				line-height: 40rpx;
				max-height: 80rpx;
			}

		}


		:deep(e-number-box__input) {
			margin: 0 !important;
		}

		:deep(.e-number-box) {

			>view,
			input {
				border: 1rpx solid #cfcfcf;

				&:first-child {
					border-right: none;
				}

				&:last-child {
					border-left: none;
				}
			}

			input {
				width: 76rpx !important;
			}
		}

		.reselection {
			width: 94rpx;
			height: 54rpx;
			border-radius: 40rpx;
			border: 2rpx solid var(--color-primary);
			line-height: 50rpx;
		}

		.no-can-list {
			background: #F2F2F2;
			border-radius: 10rpx;

			&__item {
				width: 100rpx;
				height: 100rpx;
				background: #FFFFFF;
				border-radius: 20rpx;
				overflow: hidden;

				.img {
					width: 100rpx;
					height: 100rpx;
				}
			}
		}
	}
</style>